<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<jsp:include page="/commonPart/htmlHeader2.jsp">
	<jsp:param name="title" value="${blogInfo.title}-CommonWorld" />
</jsp:include>
<body>
<div id = "CW_Screen" >
	<jsp:include page= "/commonPart/bodyHeader2.jsp" ></jsp:include>
	<div class = "CW_Content">
		<div id = "SpaceLeft">
			<jsp:include page = "/commonPart/MySpaceLeft.jsp" ></jsp:include>
			<jsp:include page = "/commonPart/BlogSpaceLeft.jsp" ></jsp:include>
		</div>
		<style>
			.icon {width: 20px; height: 20px; line-height: 20px; vertical-align: middle; display: inline-block; font-size: 14px; text-align: center; color: #fff; font-weight: bold;}
			.BlogStat {font-size: 12px; line-height: 20px;}
			.BlogStat .g {color: #40aa53;}
			.BlogTags {margin-top: 8px;}
		</style>
		<div class = "SpaceList">
			<div class = "TopBar">
			</div>
			<div class = "BlogEntity">
				<div class = "BlogTitle">
					<h1>
						<span class = "icon" style = "background: ${blogInfo.type == '原创' ? '#44ac57' : '#799acc'};" title = "${blogInfo.type}">${blogInfo.type == "原创" ? "原" : "转"}</span>
						<c:if test="${blogInfo.privacy == 1}">
							<span class = "icon" style = "background: #FFA500;" title = "私密文章">私</span>
						</c:if>
						${blogInfo.title}
					</h1>
					<div class = "BlogStat">
						发表于${blogInfo.writeDateInterval}(${blogInfo.writeDate})&nbsp;&nbsp;
    					       阅读（<span class = "g">${blogInfo.readCount}</span>）&nbsp;|&nbsp;评论（<a href = "#comments"><span class = "g">${totalComment}</span></a>）
						<span class = "admin">
							<script>
								var favor_add = '<a href = "javascript:add_to_favor(${blogInfo.blogId})" id = "favor_trigger" title = "添加到收藏夹">我要收藏</a>';
								var favor_del = '<a href = "javascript:delete_favor(${blogInfo.blogId})" id = "favor_trigger" title = "">取消收藏</a>';
								function add_to_favor(blogId) {
									ajax_post("${initParam.webContentPath}/action/blog/addFavor", 
											"blogId=" + blogId, function(result) {
										if (result.status == 1) {
											$('#attention_it').html(favor_del);
											var count = parseInt($('#p_attention_count').html()) + 1;
											$('#p_attention_count').html(count);
										}
									});
								}
								function delete_favor(blogId) {
									ajax_post("${initParam.webContentPath}/action/blog/deleteFavor", 
											"blogId=" + blogId, function(result) {
										if (result.status == 1) {
											$('#attention_it').html(favor_add);
											var count = parseInt($('#p_attention_count').html()) - 1;
											$('#p_attention_count').html(count);
										}
									});
								}
							</script>
							<em id = "p_attention_count">${blogInfo.collectCount}</em>
							人收藏此文章
						</span>
					</div>
					<div class = "tvote" onclick = "vote(${blogInfo.blogId})" title = "">
						<em class = "vote">赞</em>
						<em class = "num vote_count">${blogInfo.praiseCount}</em>
					</div>
					<script>
						function vote(blogId) {
							if ('${visitorStatus.login}' == 'false') {
								alert('要登录后才能点赞哦!');
								return;
							}
							ajax_post("/action/blog/praise", 
									"blogId="+blogId, function(result){
								if (result.status == 1) {
									var count = parseInt($('em.vote_count').html()) + 1;
									$('em.vote_count').html(count); 
								} else if (result.status == 0) {
									alert(result.msg);
								}
							});
						}
					</script>
				</div>
				<c:if test="${!(empty blogInfo.blogAbstract) && !(empty blogInfo.tags)}">
					<div class = "BlogAbstracts">
						<em class = "corner">摘要</em>
						<span>${blogInfo.blogAbstract}</span>
						<div class = "BlogTags">
							<ul>
								<c:forEach items="${blogInfo.tags}" var="tag">
									<li>${tag}</li>
								</c:forEach>
							</ul>
						</div>
					</div>
				</c:if>
				<br />
				<div class = "BlogContent">
					${blogContent}
				</div>
				<c:if test="${blogInfo.type == '转帖'}">
					<div class = "BlogCopyright">
						原文地址: <a href = "${blogInfo.originUrl}" target = "_blank">${blogInfo.originUrl}</a>
					</div>
				</c:if>
			</div>
			<div style = "margin:10px 0;"></div>
		</div>
		<script>
			angular.module('blogComment', ['ngSanitize'])
			.controller('ListComment', function($scope, $http, $filter) {
				var url = "/action/blog/listComment?userId=${blogInfo.userId}&blogId=${blogInfo.blogId}&page=${empty param.p ? 1 : param.p}&size=10";
				$http({method: 'GET', url: url}).success(function(data) {
					$scope.commentjsons = data;
				});
				$scope.totalComment = <c:out value = "${totalComment}" />;
				$scope.currentPage = <c:out value = "${empty param.p ? 1 : param.p}" />;
				$scope.pageSize = 10;
				$scope.totalPage = Math.ceil($scope.totalComment/$scope.pageSize);
				if ($scope.currentPage > 3) {
					$scope.beginIndex = $scope.currentPage - 3;
				} else {
					$scope.beginIndex = 1;
				}
				$scope.endIndex = $scope.beginIndex + 9;
				if ($scope.endIndex > $scope.totalPage) {
					$scope.endIndex = $scope.totalPage;
				}
				var pages = new Array();
				var index = 0;
				for (var i = $scope.beginIndex; i <= $scope.endIndex; i++) {
					pages[index++] = i;
				}
				$scope.pages = pages;
				$scope.delete_c = function(blogId, userId, commentId) {
					delete_c(blogId, userId, commentId);
				}
				$scope.ReplyInline = function(blogId, userId, commentId) {
					ReplyInline(blogId, userId, commentId);
				}
			});
		</script>
		<div class = "SpaceList" style = "margin-top: 20px; display: ${blogInfo.denyComment == 0 ? 'block' : 'none'};" ng-app = "blogComment" ng-controller = "ListComment" ng-cloak>
			<div class = "BlogComments">
				<div class = "RelativeLinks" style = "float: right; margin-bottom: 5px;">
					<a class = "rndbutton" href = "javascript:delete_all_comments(${blogInfo.blogId})"><span>删除所有评论</span></a>
				</div>
				<h2>
					评论<em ng-bind = "totalComment"></em>	
				</h2>
				<ul id = "BlogComments">
					<li ng-repeat = "commentjson in commentjsons" id = "cmt_{{commentjson.blogId}}_{{commentjson.userId}}_{{commentjson.commentId}}" ng-class = "{'even': {{($index + 1) % 2}} == 0}">
						<table class = "ostable">
							<tr>
								<td class = "portrait">
									<a ng-href = "{{commentjson.userHome}}" target="_blank">
										<img ng-src = "{{commentjson.portrait}}" align = "absmiddle" title = "{{commentjson.userName}}" class = "SmallPortrait" user = "{{commentjson.userId}}" />
									</a>
								</td>
								<td class = "body">
									<div class = "title">
										<span ng-bind = "(currentPage - 1) * pageSize + $index + 1"></span>楼: 
										<a ng-href = "{{commentjson.userHome}}" target="_blank" name = "{{commentjson.userName}}" class = "user" ng-bind = "commentjson.userName"></a>
										发表于 <span ng-bind = "commentjson.createTime"></span>
										<a href = "" ng-click = "delete_c(commentjson.blogId, commentjson.userId, commentjson.commentId)" ng-if = "commentjson.canAdmin">删除</a>
										<a href = "" ng-click = "ReplyInline(commentjson.blogId, commentjson.userId, commentjson.commentId)" ng-if = "commentjson.canCommit">回复此评论</a>
									</div>
									<div class = "post" ng-bind-html = "commentjson.content"></div>
									<div id = "inline_reply_of_{{commentjson.blogId}}_{{commentjson.userId}}_{{commentjson.commentId}}" class = "inline-reply"></div>
								</td>
							</tr>
						</table>
					</li>
				</ul>
			</div>
			<ul class = "pager">
				<li class = "page prev" ng-if = "(currentPage > 1)">
					<a href = "?p={{currentPage-1}}#comments">&lt;</a>
				</li>
				<li class = "page" ng-if = "(beginIndex > 1)">
					<a href = "?p=1#comments">1</a>
				</li>
				<li class = "page" ng-if = "totalPage > 1" ng-class = "{current: {{currentPage == page}}}" ng-repeat = "page in pages">
					<a href = "?p={{page}}#comments" ng-bind = "page"></a>
				</li>
				<li class = "page" ng-if = "(endIndex < totalPage)">
					<a href = "?p={{totalPage}}#comments" ng-bind = "totalPage"></a>
				</li>
				<li class = "page next" ng-if = "(currentPage < totalPage)">
					<a href = "?p={{currentPage + 1}}#comments">&gt;</a>
				</li>
			</ul>
		</div>
		<style>
			.error_msg {
				display: none;
				font-size: 10pt;
			}
		</style>
		<div id = "inline_reply_editor" style = "display: none;">
			<div class = "BlogCommentForm">
				<form id = "form_inline_comment" action = "/action/blog/addComment?blogId=${blogInfo.blogId}" method = "post">
					<input type = "hidden" id = "inline_reply_id" name = "reply_id" value = "" />
					<textarea name = "content" id = "com_content" style = "width: 650px; height: 60px;" onkeydown=""></textarea>
					<br />
					<p>
						<span style = "float: right;">
							<input type = "button" value = "关闭" class = "blg_submit_btn" id = "btn_close_inline_reply" style = "background: rgba(255,255,255,0); color: #555;"></input>
							<input type = "submit" value = "回复" id = "btn_comment" class = "blg_submit_btn" />
						</span>
						<span class = "NoData">.</span>
						<span class = "error_msg" style = "background: #fff;"></span>
					</p>
				</form>
			</div>
		</div>
		<div class = "SpaceList" style = "margin-top: 20px; display: ${blogInfo.denyComment == 0 ? 'block' : 'none'};">
			<a name = "comments" id = "postform"></a>
			<div class = "BlogCommentForm">
				<form id = "form_comment" action = "/action/blog/addComment?blogId=${blogInfo.blogId}" method = "post">
					<div class = "comment_portrait">
						<img src = "${visitorInfo.headImage}" alt = "${visitorInfo.name}" title = "${visitorInfo.name}" class = "LargePortrait" />
					</div>
					<div class = "comment_form">
						<textarea name = "content" id = "wmd-input" style = "width: 650px; height: 80px;"></textarea>
						<p>
							<input type = "submit" class = "blg_submit_btn" value = "发表评论" style = "float: right;"></input>
							<span class = "NoData">.</span>
							<span class = "error_msg" style = "background: #fff;"></span>
						</p>
					</div>
				</form>
			</div>
		</div>
		<script>
			
			function myCommentTemp(json) {
				var myComment = $('#myComment');
				$('ul#BlogComments').append(myComment.html());
				var last = $('ul#BlogComments').children('li').last();
				last.attr('id', 'cmt_' + json.blogId + '_' + json.userName + '_' + json.commentId);
				last.find('.portrait a').attr('href', json.userHome);
				last.find('.portrait a img').attr({src:json.portrait, title:json.userName, user:json.userId});
				var title_a = last.find('.body .title a');
				title_a.attr('href', json.userHome);
				title_a.html(json.userName);
				title_a.next('span').html(json.createTime);
				last.find('.post').html(json.content);
			}
			
			$('#form_comment').ajaxForm({
				dataType: 'json',
				beforeSubmit: function(f, j, o) {
					$('#form_comment .error_msg').hide();
					if ($('#wmd-input').val().length == 0) {
						$('#form_comment .error_msg').html('评论内容不能为空');
						$('#form_comment .error_msg').show();
						return false;
					}
					if ('${visitorStatus.login}' == 'false') {
						$('#form_comment .error_msg').html("请先<a href = '${initParam.webRootUrl}account/login.jsp?goto_page=" + location.href + "'>登录</a>");
						$('#form_comment .error_msg').show();
						return false;
					}
				},
				success: function(json) {
					myCommentTemp(json);
				}
			});
			function ReplyInline(blogId, userId, commentId) {
				$('.inline-reply').empty();
				var filter = '#inline_reply_of_' + blogId + '_' + userId + '_' + commentId;
				$(filter).html($('#inline_reply_editor').html());
				$(filter + ' #com_content').focus();
				$(filter + ' #inline_reply_id').val(userId + '_' + commentId);
				$(filter + ' #btn_close_inline_reply').click(function(){
					$('.inline-reply').empty();
				});
				$('#form_inline_comment').ajaxForm({
					dataType: 'json',
					beforeSubmit: function(f, j, o) {
						$('#form_inline_comment .error_msg').hide();
						if ($('#com_content').val().length == 0) {
							$('#form_inline_comment .error_msg').html('评论内容不能为空');
							$('#form_inline_comment .error_msg').show();
							return false;
						}
						if ('${visitorStatus.login}' == 'false') {
							$('#form_inline_comment .error_msg').html("请先<a href = '${initParam.webRootUrl}account/login.jsp?goto_page=" + location.href + "'>登录</a>");
							$('#form_inline_comment .error_msg').show();
							return false;
						}
					},
					success: function(json) {
						$('.inline-reply').empty();
						myCommentTemp(json);
					}
				});
			}
			
			function delete_c(blogId, userId, commentId) {
				if (!confirm('确定要删除这条评论?'))
					return;
				ajax_post('/action/blog/deleteComment', 'blogId=' + blogId + '&commentId=' + commentId, function(html) {
					if (html.length > 0)
						alert(html);
					else
						$('#cmt_' + blogId + '_' + userId + '_' + commentId).remove();
				});
			}
			
			function delete_all_comments(blogId) {
				if (!confirm('确定要删除所有评论?'))
					return;
				ajax_post('/action/blog/deleteComment', 'blogId=' + blogId + '&commentId=' + 0, function(html) {
					if (html.length > 0)
						alert(html);
					else {
						$('ul#BlogComments').empty();
						$('ul.pager').empty();
					}
				});
			}
		</script>
		<div id = "myComment" style = "display: none;">
			<li id = 'cmt_commentjson.blogId_commentjson_userId_commentjson.commentId'>
				<table class = 'ostable'>
					<tr>
						<td class = 'portrait'>
							<a href = 'commentjson.userHome' target = '_blank'>
								<img src = '/images/portrait.gif' title = 'commentjson.userName' class = 'SmallPortrait' user = 'commentjson.userId'></img>
							</a>
						</td>
						<td class = 'body'>
							<div class = 'title'>
								<a href = 'commentjson.userHome' target="_blank" class = 'user'>commentjson.userName</a>
								发表于<span>'commentjson.createTime'</span>
							</div>
							<div class = 'post'>'commentjson.content'</div>
						</td>
					</tr>							
				</table>
			</li>
		</div>
	</div>
	<div class = "clear"></div>
	<div id = "footer"></div>
</div>
</body>
</html>